<template>
  <view class="camera-container">
    <!-- 相机预览容器 -->
    <view ref="cameraView" class="preview-view"></view>

    <!-- 操作按钮 -->
    <view class="btn-group">
      <button @click="startCamera" :disabled="isActive">启动相机</button>
      <button @click="takePhoto" :disabled="!isActive">拍摄</button>
      <button @click="stopCamera" :disabled="!isActive">关闭相机</button>
    </view>

    <!-- 预览结果 -->
    <image :src="imageUrl" mode="widthFix" v-if="imageUrl" class="result-img"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isActive: true, // 相机是否激活
      imageUrl: '', // 水印图片地址（base64）
      appKey: '5b1e305276ba7850fc6c70797ad4fd7f' // 替换为官方提供的 AppKey
    };
  },
  onLoad() {
    // 页面加载时初始化 SDK
    alert(11)
    this.initSDK();
  },
  onUnload() {
    // 页面卸载时释放资源
    this.stopCamera();
  },
  methods: {
    // 初始化 SDK
    initSDK() {
      if (!window.WatermarkCamera) {
        uni.showToast({ title: 'SDK 加载失败', icon: 'none' });
        return;
      }

      window.WatermarkCamera.init({
        appid: this.appKey,
        success: () => {
          uni.showToast({ title: 'SDK 初始化成功', icon: 'none' });
        },
        error: (err) => {
          uni.showToast({ title: `初始化失败：${err.message}`, icon: 'none' });
        }
      });
    },

    // 启动相机
    startCamera() {
      const container = this.$refs.cameraView;
      if (!container) {
        uni.showToast({ title: '未找到相机容器', icon: 'none' });
        return;
      }

      // 水印配置（根据业务自定义）
      const config = this.getWatermarkConfig();

      window.WatermarkCamera.startCamera({
        container: container,
        config: config,
        success: () => {
          this.isActive = true;
          uni.showToast({ title: '相机启动成功', icon: 'none' });
        },
        error: (err) => {
          uni.showToast({ title: `启动失败：${err.message}`, icon: 'none' });
        }
      });
    },

    // 拍摄并添加水印
    takePhoto() {
      window.WatermarkCamera.takePhoto({
        success: (result) => {
          this.imageUrl = result.imageUrl; // 保存 base64 图片
          uni.showToast({ title: '拍摄成功', icon: 'none' });
          // 上传图片到后端
          this.uploadImage(result.imageUrl);
        },
        error: (err) => {
          uni.showToast({ title: `拍摄失败：${err.message}`, icon: 'none' });
        }
      });
    },

    // 关闭相机
    stopCamera() {
      if (!this.isActive) return;

      window.WatermarkCamera.stopCamera({
        success: () => {
          this.isActive = false;
          this.imageUrl = '';
          uni.showToast({ title: '相机已关闭', icon: 'none' });
        }
      });
    },

    // 水印配置
    getWatermarkConfig() {
      return {
        cameraConfig: {
          direction: 'back', // 后置相机
          resolution: '720p'
        },
        textWatermarks: [
          {
            content: `用户：${uni.getStorageSync('username')}`, // 从缓存获取用户名
            position: 'top-left',
            style: { fontSize: '16px', color: '#fff', backgroundColor: 'rgba(0,0,0,0.5)' }
          },
          {
            content: new Date().toLocaleString(),
            position: 'bottom-left',
            isDynamic: true
          }
        ],
        antiTamper: { enable: true }
      };
    },

    // 上传图片到后端（使用 UniApp 的上传 API）
    uploadImage(base64) {
      // 转换 base64 为临时文件（H5 端可直接传 base64，App 端需转文件）
      const tempFilePath = base64;

      uni.uploadFile({
        url: '/api/upload', // 后端上传接口
        filePath: tempFilePath,
        name: 'file',
        formData: { type: 'watermark' },
        success: (res) => {
          const data = JSON.parse(res.data);
          if (data.success) {
            uni.showToast({ title: '上传成功', icon: 'none' });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.preview-view {
  width: 100%;
  height: 400rpx;
  background-color: #000;
  margin: 20rpx 0;
}

.btn-group {
  display: flex;
  gap: 20rpx;
  margin: 20rpx 0;
}

button {
  flex: 1;
  padding: 15rpx 0;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 8rpx;
}

.result-img {
  width: 100%;
  margin-top: 20rpx;
}
</style>
